/**
 * 伪3D效果
 * @author  陆楚良 <lu_chuliang@sina.com>
 * @version 1.0
 * https://git.oschina.net/luchg/jquery.pseudo3d.js
 * 依赖：
 *     需要jQuery的支持
 */
 /*
 例子：
    <div class="p3d">
        <!-- data-distance 可省略 -->
        <div data-distance="0.12"><img src="./img/1.png" alt=""></div>
        <div data-distance="0.1"><img src="./img/2.png" alt=""></div>
        <div data-distance="0.08"><img src="./img/3.png" alt=""></div>
        <div data-distance="0.06"><img src="./img/4.png" alt=""></div>
        <div data-distance="0.04"><img src="./img/5.png" alt=""></div>
    </div>
    <script>
        $(".p3d").pseudo3d("div");
        // 或
        // $(".p3d").pseudo3d([
        //    // 当省略distance属性时，将会读取data-distance，如果data-distance也没有写，则会自动填充为相对前一图层的0.02单位距离
        //    {element:$(".p3d").find("div").get(0), distance:0.12}
        //    {element:$(".p3d").find("div").get(1), distance:0.1}
        //    {element:$(".p3d").find("div").get(2), distance:0.08}
        //    {element:$(".p3d").find("div").get(3), distance:0.06}
        //    {element:$(".p3d").find("div").get(4), distance:0.04}
        // ]);
    </script>
 */
!function (window, factory) {
    if (typeof exports === 'object'){
        module.exports = factory();
    } else if (typeof define === 'function') {
        define(factory);
    } else {
        factory()(jQuery);
    }
}(this, function () {
    return function($){
        /**
         * pseudo3d
         * @param  {string|array}   coverage 图层选择器或一个包含图层详细信息的数组
         * @param  {number}         distance “焦点”与“眼睛”的距离，此单位用于关联图层与“焦点”的距离，缺省为1
         */
        $.fn.pseudo3d = $.fn.pseudo3d || function(coverage, distance){
            var $this = this.eq(0); // 只处理第一个
            var _coverage = [];
            var distance  = distance || 1;
            if($.type(coverage)=="array"){
                var prev_distance = 0;
                $.each(coverage, function(k, v){
                    var ele = $this.find(v.element);
                    prev_distance = $.type(v.distance)=="number"    ? v.distance    : ele.data("distance");
                    prev_distance = $.type(prev_distance)=="number" ? prev_distance : (prev_distance + distance * 0.02);
                    _coverage.push({
                        element : ele,          // 虽然支持字符串选择器，但是建议还是使用element对象的好点，以避免被选中多个节点
                        distance: prev_distance // 可选，该图层与“焦点”的距离，缺省会自动计算与前一图层距离distance * 0.02单位，此单位与“眼睛”的距离息息相关
                    });
                });
            }else{
                var c = $this.find(coverage)
                var i = c.length-1;
                var prev_distance = 0;
                var ele;
                for(;i>=0;i--){
                    ele = c.eq(i);
                    prev_distance = $.type(ele.data("distance"))=="number" ? ele.data("distance") : (prev_distance + distance * 0.02);
                    _coverage.push({
                        element : ele,
                        distance: prev_distance
                    });
                }
            }
            $this.on("mousemove", function(event){
                var x = event.offsetX - ($this.width() / 2);
                //关系： 鼠标位移:distance = 图层位移:距离
                $.each(_coverage, function(k, v){
                    var css = "translate(" + -parseInt((x/distance)*v.distance) + "px,0px)";
                    v.element.css({
                        "-webkit-transform": css,
                        "transform": css
                    });
                });
            });
        };
    };
});
